<template id="cart">
  <el-drawer type="primary" :visible="show" :with-header="false" :before-close="doClose">
    <div style="position: relative; height: 100%;">
      <div style="padding:10px; height: 100%; overflow: hidden;">
        <div style="padding:10px 0 20px 10px">🛒 购物车</div>
        <div style="height: calc(100% - 110px); overflow-y: auto; padding-right: 10px;">
          <template v-if="cartGoods">
            <el-checkbox-group v-model="selected_items" @change="handleCheckedCitiesChange">
              <el-card v-for="row in cartGoods" :key="row.id" style="margin-bottom: 10px;">
                <div class="flex">
                  <div class="flex" style="width: 30px;">
                    <el-checkbox :label="row.id" :indeterminate="false"><br /></el-checkbox>
                  </div>
                  <div style="width: 100px;">
                    <el-image :src="row.goods_img" style="width: 80px; height: 80px;"></el-image>
                  </div>
                  <div style="flex:1;">
                    <div style="font-size:15px; color: #333; font-weight: bold;">{{row.goods_name}}</div>
                    <div style="font-size:12px; color: #666; padding-top: 5px; ">
                      <div>型号规格：{{row.sku_name}}</div>
                      <div>价格：¥{{row.goods_price}}</div>
                      <div>数量：{{row.buy_number}}</div>
                    </div>
                  </div>
                  <div style="width: 100px; text-align: center;">
                    <div><span style="font-size:12px;margin-right: 5px;">¥</span> <span style="color: red;font-size: 25px;">{{row.goods_price}}</span></div>
                    <div @click="removeCart(row)" style="font-size:12px; cursor: pointer;color: red;padding:10px;">删除</div>
                  </div>
                </div>
              </el-card>
            </el-checkbox-group>

            <div style="height: 200px;"></div>
          </template>
          <template v-else>
            <div style="padding:50px; background: #e2e2e2;">
              🛒 购物车为空
            </div>
          </template>
        </div>
      </div>

      <div class="padding" style="position: absolute; width: 50px; height: 50px; right: 10px;top:10px;padding-right:10px; text-align: center; cursor: pointer;" @click="doClose">
        关闭
      </div>
      <div class="padding flex" style="position: absolute; border-top:#eee 1px dashed; width: 100%; background: #fff; bottom: 0; padding:10px; text-align: right; padding-right: 50px;">
        <div style="width: 70px;">
          <el-checkbox :indeterminate="isIndeterminate" v-model="selected_items_check_all" @change="checkAllChange">全选</el-checkbox>
        </div>
        <div style="flex:1">
          <span style="margin-right: 20px;">总价 ¥<span style="color: red;font-size: 25px;">{{order.amount}}</span></span>
          <el-button type="warning" @click="doSubmitOrder">提交领用单</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  Vue.component('Cart', {
    template: "#cart",
    components: {},
    props: {
      show: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        isIndeterminate: true,
        selected_items_check_all: false,
        selected_items: [],
        order: {
          amount: 0
        },
        cartGoods: []
      };
    },
    watch: {
      show(val) {
        let that = this
        if (!val) {
          return
        }

        this.loadData()
      }
    },
    methods: {
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cartGoods.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cartGoods.length;

        this.countPrice()
      },
      removeCart(row) {
        let that = this

        axios.post('/user/cart/delete', {
          id: row.id
        }).then(res => {
          if (res.data.status == 200) {
            that.loadData()
          } else {
            that.$message.error(res.data.msg);
          }
        })
      },
      checkAllChange() {
        if (this.selected_items.length == 0) {
          this.cartGoods.forEach(row => {
            this.selected_items.push(row.id)
          });
          this.selected_items_check_all = true
        } else {
          this.selected_items = []
          this.selected_items_check_all = false
        }
        this.countPrice()
        this.isIndeterminate = false;
      },
      countPrice() {
        this.order.amount = 0
        this.cartGoods.forEach(row => {
          if (this.selected_items.indexOf(row.id) === -1) {
            row.selected = false
          } else {
            row.selected = true
            this.order.amount += row.goods_price * row.buy_number
          }
        });
      },
      doSubmitOrder() {
        let that = this
        axios.post('/user/cart/createOrder', {
          order_goods: this.selected_items
        }).then(res => {
          if (res.data.status == 200) {
            that.$alert("领用单已提交！", {
              type: 'success',
            })
            this.doClose()
          } else {
            that.$message.error(res.data.msg);
          }
        })
      },
      doClose() {
        this.$emit("on-success")
      },
      loadData() {
        let that = this

        axios.post('/user/cart/index.html', param).then(res => {
          if (res.data.status == 200) {
            that.cartGoods = res.data.data.data
            that.cartGoods.forEach(row => {
              // if (row.selected) {
              this.selected_items.push(row.id)
              // }
            });
            setTimeout(() => {
              this.countPrice()
              if (that.selected_items.length > 0) {
                that.isIndeterminate = true
              }
            }, 1000);
          } else {
            that.$message.error(res.data.msg);
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  })
</script>